﻿@page "/circular-gauge/arc-gauge"

@using Syncfusion.Blazor.CircularGauge
@using Syncfusion.Blazor.Inputs

@inherits SampleBaseComponent;
<!-- <div class="control-section">
    <SfCircularGauge Title="Progress Tracker">
        <CircularGaugeAxes>
            <CircularGaugeAxis StartAngle="200" EndAngle="160" Minimum="1" Maximum="100" Radius="80%">
                <CircularGaugeAxisLineStyle Width="0.01">
                </CircularGaugeAxisLineStyle>
                <CircularGaugeAxisLabelStyle Position="Syncfusion.Blazor.CircularGauge.Position.Inside" UseRangeColor="true">
                    <CircularGaugeAxisLabelFont Size="0px" Color="transparent"></CircularGaugeAxisLabelFont>
                </CircularGaugeAxisLabelStyle>
                <CircularGaugeAxisMajorTicks Height="0.01">
                </CircularGaugeAxisMajorTicks>
                <CircularGaugeAxisMinorTicks Height="0.01">
                </CircularGaugeAxisMinorTicks>
                <CircularGaugeRanges>
                    <CircularGaugeRange Start="1" End="100" Radius="90%" StartWidth="30" EndWidth="30" Color="#E0E0E0" RoundedCornerRadius="20">
                    </CircularGaugeRange>
                </CircularGaugeRanges>
                <CircularGaugePointers>
                    <CircularGaugePointer Value="@pointerValue" RoundedCornerRadius="20" Type="PointerType.RangeBar" Radius="90%" Color="@pointerColor" PointerWidth="30">
                        <CircularGaugePointerAnimation Enable="false">
                        </CircularGaugePointerAnimation>
                        <CircularGaugePointerBorder Color="grey" Width="0.01">
                        </CircularGaugePointerBorder>
                    </CircularGaugePointer>
                </CircularGaugePointers>
                <CircularGaugeAnnotations>
                    <CircularGaugeAnnotation Radius="0%" Angle="0" ZIndex="1">
                        <ContentTemplate>
                            <div style="font-size:35px;width:120px;text-align:center; margin-top: -30px; margin-left: -55px">@sliderValueText</div>
                        </ContentTemplate>
                    </CircularGaugeAnnotation>
                    <CircularGaugeAnnotation Angle="0" ZIndex="1" Radius="-100%">
                        <ContentTemplate>
                            <div style="height:70px;width:250px; margin-left: -120px">
                                <SfSlider Value="@sliderPointerValue" Type=SliderType.MinRange>
                                    <SliderEvents OnChange="rangeStartChange" TValue="double"></SliderEvents>
                                </SfSlider>
                            </div>
                        </ContentTemplate>
                    </CircularGaugeAnnotation>
                </CircularGaugeAnnotations>
            </CircularGaugeAxis>
        </CircularGaugeAxes>
    </SfCircularGauge>
</div>
<style>
    .sliderwrap {
        margin-top: 0px;
        width: 300px;
        align-self: center;
    }

    .e-control-wrapper.e-slider-container .e-slider .e-handle {
        background-color: #4B4B4B;
    }

    .e-control-wrapper.e-slider-container.e-horizontal .e-slider-track {
        background: -webkit-linear-gradient(left, #ea501a 0, #ea501a 20%, #f79c02 40%, #e5ce20 60%, #a1cb43 80%, #82b944 100%);
        background: linear-gradient(left, #ea501a 0, #ea501a 20%, #f79c02 40%, #e5ce20 60%, #a1cb43 80%, #82b944 100%);
        background: -moz-linear-gradient(left, #ea501a 0, #ea501a 20%, #f79c02 40%, #e5ce20 60%, #a1cb43 80%, #82b944 100%);
    }

    .e-limit-bar.e-limits {
        background-color: transparent !important;
    }

    .e-control-wrapper.e-slider-container.e-horizontal .e-range {
        height: 0px !important;
    }

    .e-control-wrapper.e-slider-container.e-horizontal .e-slider-track {
        height: 8px;
        top: calc(50% - 4px);
        border-radius: 5px;
    }
</style>

@code {
    private Double sliderPointerValue = 60;
    private String pointerColor = "#e5ce20";
    private Double pointerValue = 60;
    private String sliderValueText = "60/100";
    private void rangeStartChange(Syncfusion.Blazor.Inputs.SliderChangeEventArgs<double> args)
    {
        sliderPointerValue = Convert.ToDouble(args.Value);
        pointerValue = sliderPointerValue;
        if (sliderPointerValue >= 0 && sliderPointerValue < 20)
        {
            pointerColor = "#ea501a";
        }
        else if (sliderPointerValue >= 20 && sliderPointerValue < 40)
        {
            pointerColor = "#f79c02";
        }
        else if (sliderPointerValue >= 40 && sliderPointerValue < 60)
        {
            pointerColor = "#e5ce20";
        }
        else if (sliderPointerValue >= 60 && sliderPointerValue < 80)
        {
            pointerColor = "#a1cb43";
        }
        else if (sliderPointerValue >= 80 && sliderPointerValue < 100)
        {
            pointerColor = "#82b944";
        }
        sliderValueText = sliderPointerValue.ToString() + "/100";
        this.StateHasChanged();
    }
} -->
